<template>
  <el-table
    :data="list"
    :header-cell-style="{background: '#F2F6FC'}"
    element-loading-text="Loading"
    fit
    border
    size="medium"
    :max-height="250"
    @selection-change="handleSelect"
  >

    <el-table-column v-if="select" align="center" width="50" type="selection" />
    <el-table-column v-else align="center" width="50" label="序号" type="index" />

    <el-table-column
      v-for="(item, index) in columns"
      :key="index"
      :label="item.label"
      :min-width="item.minWidth ? item.minWidth : 100"
      :show-tooltip-when-overflow="item.popover"
      align="center"
    >
      <template slot-scope="scope">

        <el-image
          v-if="item.type === 'image'"
          :src="scope.row[item.key]"
          :preview-src-list="[scope.row[item.key]]"
          style="width: 100px; height: 100px"
          fit="cover"
          lazy
        />

        <strong v-else>{{ scope.row[item.key] }}</strong>
      </template>
    </el-table-column>
  </el-table>
</template>
<script lang="ts">
import { Table, TableColumn } from 'element-ui'
import { Vue, Component, Prop } from 'vue-property-decorator'
@Component({
  name: 'TableList',
  components: {
    ElTable: Table,
    ElTableColumn: TableColumn
  }
})
export default class extends Vue {
  @Prop({ required: true, default: () => [] }) private list!:any[]
  @Prop({ required: true, default: () => [] }) private columns!:any[]
  @Prop({ default: false }) private select!:boolean
  private selected: any[] = []

  handleSelect(val: any[]) {
    this.selected = val
  }
}
</script>
